<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-row :gutter="20" class="margin-tb-sm">
        <el-col :span="6">
          <el-form-item label="文章标题">
            <el-input
              v-model="form.article_title"
              placeholder="请输入标题"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="文章分类">
            <el-autocomplete
              class="inline-input"
              v-model="form.category"
              :fetch-suggestions="querySearch"
              placeholder="请输入分类名"
              @select="handleSelect"
              style="width: 100%"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="文章类型">
            <el-radio v-model="form.type" :label="1">原创</el-radio>
            <el-radio v-model="form.type" :label="0">转载</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="margin-tb-sm">
        <el-col :span="12"
          ><el-form-item label="文章标签">
            <el-select
              v-model="form.tags"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择文章标签"
              style="width: 100%"
            >
              <el-option
                v-for="item in tags"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="margin-lr">
          <el-button type="success" @click="handleSave(1)">发表</el-button>
          <el-button type="primary" @click="handleSave(0)">保存</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <mavon-editor
        v-model="form.article_content"
        ref="md"
        @imgAdd="$imgAdd"
        @change="change"
        :ishljs="true"
        style="border: 1px solid #eee; height: 100vh; box-shadow: none"
      />
    </el-row>
  </div>
</template>
<script>
import {
  articleCate,
  articleTag,
  articleSave,
  articleDetail,
} from "@/api/article";
export default {
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      restaurants: "",
      tags: [],
      form: {
        id: 0,
        category: "",
        article_title: "",
        article_content: "",
        is_publish: 0,
        type: 1,
        tags: "",
      },
    };
  },
  watch: {
    id: function (newVal, oldVal) {
      if (newVal === 0) return;
      return this.loadEditData(newVal);
    },
  },
  mounted() {
    this.handleLoadData();
  },
  methods: {
    // 加载需要编辑的数据
    loadEditData(id) {
      articleDetail(id).then((res) => {
        this.form = res.data;
      });
    },
    // 处理保存
    handleSave(param) {
      // console.log(this.form, "FORM");
      this.$showFullScreenLoading();
      this.form.is_publish = param;
      let info = this.form.id === 0 ? "添加成功" : "更新成功";
      articleSave(this.form).then((res) => {
        this.$message.success(info);
        this.$emit("addArticle");
        this.$closeFullScreenLoading();
        this.form = {
          id: 0,
          category: "",
          article_title: "",
          article_content: "",
          is_publish: 0,
          type: 1,
          tags: "",
        };
      });
    },
    // 加载分类
    handleLoadData() {
      Promise.all([articleCate(), articleTag()]).then((res) => {
        let [rest, tags] = res;
        this.restaurants = rest.data.data;
        this.tags = tags.data.data;
      });
    },
    handleSelect(item) {
      // console.log(item, "SELECTCATE");
    },
    // 筛选分类
    querySearch(queryString, callback) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter((item) => {
            return (
              item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
            );
          })
        : restaurants;
      // 调用 callback 返回建议列表的数据
      callback(results);
    },
    // markdown图片上传
    $imgAdd(pos, $file) {
      //   var formdata = new FormData();
      //   formdata.append("file", $file);
      //将下面上传接口替换为你自己的服务器接口
      //   axios({
      //     url: "/common/upload",
      //     method: "post",
      //     data: formdata,
      //     headers: { "Content-Type": "multipart/form-data" },
      //   }).then((url) => {
      //     this.$refs.md.$img2Url(pos, url);
      //   });
    },
    // markdown内容改变
    change(value, render) {
      // render 为 markdown 解析后的结果
      //   console.log(value, render);
      //   this.html = render;
    },
  },
};
</script>
<style lang='scss' scoped>
.el-scrollbar__wrap {
  overflow: hidden !important;
  height: 100%;
}
</style>